---
title: 认证
description: 认证您的用户
---

# 认证

## 为您的应用程序提供经过认证的访问权限

在连接过程中，您可以选择强制要求用户使用其钱包签名一个消息，证明他们拥有连接的账户，并允许您创建具有对您的应用程序的特权访问权限的认证用户会话。

虽然可以 [与自定义后端和消息格式进行集成](/docs/custom-authentication)， 但RainbowKit为 [使用以太坊登录](https://login.xyz) 和 [NextAuth](https://next-auth.js.org) 提供了一流的支持。

### 设置使用以太坊和NextAuth登录

#### 安装

安装 `@rainbow-me/rainbowkit-siwe-next-auth` 包。

```bash
npm install @rainbow-me/rainbowkit-siwe-next-auth
```

#### 设置提供者

在您的`App`组件中，导入`RainbowKitSiweNextAuthProvider`。

```tsx
import { RainbowKitSiweNextAuthProvider } from '@rainbow-me/rainbowkit-siwe-next-auth';
```

用`RainbowKitSiweNextAuthProvider`封装`RainbowKitProvider`，确保它嵌套在NextAuth的`SessionProvider`中，以便可以访问会话。

```tsx
import { RainbowKitSiweNextAuthProvider } from '@rainbow-me/rainbowkit-siwe-next-auth';
import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { SessionProvider } from 'next-auth/react';
import type { Session } from 'next-auth';
import { AppProps } from 'next/app';
import { WagmiProvider } from 'wagmi';
import {
  QueryClientProvider,
  QueryClient,
} from "@tanstack/react-query";

const queryClient = new QueryClient();

export default function App({
  Component,
  pageProps,
}: AppProps<{
  session: Session;
}>) {
  return (
    <WagmiProvider {...etc}>
      <SessionProvider refetchInterval={0} session={pageProps.session}>
        <QueryClientProvider client={queryClient}>
          <RainbowKitSiweNextAuthProvider>
            <RainbowKitProvider {...etc}>
              <Component {...pageProps} />
            </RainbowKitProvider>
          </RainbowKitSiweNextAuthProvider>
        </QueryClientProvider>
      </SessionProvider>
    </WagmiProvider>;
  );
}
```

利用`RainbowKitSiweNextAuthProvider`，当用户连接他们的钱包时，他们将需要通过签名消息进行身份验证。

#### 自定义SIWE消息选项

您可以通过将函数传递给`RainbowKitSiweNextAuthProvider`上的`getSiweMessageOptions`属性，自定义[SIWE消息选项](https://viem.sh/docs/siwe/utilities/createSiweMessage#parameters)。

每当创建新消息时将调用此函数。从该函数返回的选项将与默认选项合并。

```tsx
import {
  RainbowKitSiweNextAuthProvider,
  GetSiweMessageOptions,
} from '@rainbow-me/rainbowkit-siwe-next-auth';

const getSiweMessageOptions: GetSiweMessageOptions = () => ({
  statement: 'Sign in to my RainbowKit app',
});

<RainbowKitSiweNextAuthProvider
  getSiweMessageOptions={getSiweMessageOptions}
>
  ...
</RainbowKitSiweNextAuthProvider>;
```

#### 在服务器端访问会话

您可以使用NextAuth的`getToken`函数（从`next-auth/jwt`中导入）来访问会话令牌。如果用户已成功认证，会话令牌的`sub`属性（即令牌的"subject"，即用户）将是用户的地址。

您还可以通过`getServerSideProps`从服务器传递已解析的会话对象，以便NextAuth不需要在客户端再次解析它。

例如：

```tsx
import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
import { getSession } from 'next-auth/react';
import { getToken } from 'next-auth/jwt';
import React from 'react';

export const getServerSideProps: GetServerSideProps = async context => {
  const session = await getSession(context);
  const token = await getToken({ req: context.req });

  const address = token?.sub ?? null;
  // If you have a value for "address" here, your
  // server knows the user is authenticated.

  // You can then pass any data you want
  // to the page component here.
  return {
    props: {
      address,
      session,
    },
  };
};

type AuthenticatedPageProps = InferGetServerSidePropsType<
  typeof getServerSideProps
>;

export default function AuthenticatedPage({
  address,
}: AuthenticatedPageProps) {
  return address ? (
    <h1>Authenticated as {address}</h1>
  ) : (
    <h1>Unauthenticated</h1>
  );
}
```

有关管理会话的更多信息，您可以参考以下文档：

- [Next.js 身份验证指南](https://nextjs.org/docs/pages/guides/authentication)
- [NextAuth文档](https://next-auth.js.org)
